<template>
  <div class="order-list">
    <el-tabs v-model="activeBar" class="demo-tabs">
      <el-tab-pane label="全部订单" name="all">
        <template v-if="orderList.length">
          <div class="order-item" v-for="item in orderList" :key="item.orderId">
            <div class="order-header">
              <span class="time">{{ item.createTime }}</span>
              <span class="order-no">订单号: {{ item.orderCode }}</span>
            </div>
            <div class="order-content">
              <div class="order-info">
                <div class="order-cover">
                  <svg-icon
                    v-if="item.vipType == 2"
                    name="svip"
                    size="60"
                    color="#f3b361"
                  />
                  <svg-icon
                    v-if="item.vipType == 1"
                    name="userVip"
                    size="60"
                    color="#f3b361"
                  />
                </div>
                <div class="order-name">
                  {{ item.vipName }}
                </div>
                <span class="order-counter"> x1 </span>
              </div>
              <div class="pay-type">
                <p>{{ item.payName }}</p>
                <p class="price">¥{{ item.orderPayAmount }}</p>
              </div>
              <div class="pay-status">
                <p>
                  <span v-if="item.orderStatus == 0" class="text-red-400">
                    未支付
                  </span>
                  <span v-if="item.orderStatus == 1" class="text-green-400">
                    已支付
                  </span>
                  <span v-if="item.orderStatus == 2"> 订单已过期 </span>
                </p>
                <!-- <p class="desc">订单详情</p> -->
              </div>
              <div class="handle-order">
                <!-- <p class="cancel-btn" @click="closeOrder(item)">取消订单</p> -->
                <div
                  class="pay-btn"
                  @click="openCodePopup(item)"
                  v-if="item.orderStatus == 0"
                >
                  立即支付
                </div>
              </div>
            </div>
          </div>
        </template>
        <template v-else>
          <el-empty description="空空如也~" />
        </template>
      </el-tab-pane>
      <!-- <el-tab-pane label="待支付" name="pay"></el-tab-pane>
      <el-tab-pane label="已完成" name="over"></el-tab-pane> -->
    </el-tabs>
    <el-dialog
      v-model="payCodePopupStatus"
      align-center
      title="微信支付"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div class="code-item">
        <div class="mr-12 flex justify-center flex-wrap">
          <div class="code">
            <qrcode-vue v-if="codeUrl" :value="codeUrl" :size="100" level="H" />
            <div v-else class="w-full h-full" v-loading="true"></div>
          </div>
          <div class="item-title">
            <img class="title-icon" src="@/assets/image/scan_icon.png" alt="" />
            <div class="title-r">
              <p>请使用<span class="text-green-400">微信</span>扫一扫</p>
              <p>扫描二维码支付</p>
            </div>
          </div>
        </div>
        <div>
          <img src="@/assets/image/wx_pay_tip_img.png" alt="" />
        </div>
      </div>
      <div class="dialog-floor">
        <el-button type="success" @click="overPay">已完成支付</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { useOrdersHooks } from "./hooks";
import QrcodeVue from "qrcode.vue";

const {
  activeBar,
  orderList,
  closeOrder,
  openCodePopup,
  payCodePopupStatus,
  overPay,
  codeUrl
} = useOrdersHooks();
</script>

<style scoped lang="postcss">
.order-list {
  @apply bg-white px-4 pb-3;
  .order-item {
    @apply border border-gray-bg mb-4;
    .order-header {
      @apply flex bg-gray-bg p-2;
      .time {
        @apply mr-8;
        color: #999;
      }
    }
    .order-content {
      @apply flex px-2;
      .order-info {
        @apply flex-1 flex py-4 relative;
        .order-cover {
          @apply mr-3 flex justify-center items-center;
          width: 80px;
          height: 60px;
        }
        .order-counter {
          @apply absolute right-2 top-4 text-gray-text;
        }
      }
      .pay-type,
      .pay-status,
      .handle-order {
        @apply border-l border-gray-bg text-center py-4 text-gray-text flex flex-wrap flex-col justify-between items-center;
        width: 130px;
      }
      .pay-status {
        @apply justify-center;
        .desc {
          @apply text-black cursor-pointer;
        }
      }
      .handle-order {
        @apply text-black justify-center;
        .pay-btn {
          @apply bg-red-500 text-white px-3 py-1 rounded-full cursor-pointer;
        }
        .cancel-btn {
          @apply cursor-pointer;
        }
      }
    }
  }

  .code-item {
    @apply flex items-center flex-wrap px-14 py-4;

    .code {
      @apply border p-2 flex justify-center items-center;
      width: 120px;
      height: 120px;
    }
    .item-title {
      @apply flex items-center justify-center w-full mt-2;
      font-size: 18px;
      .title-icon {
        @apply mr-3;
        width: 40px;
        height: 40px;
      }
      .title-r {
        @apply text-center;
      }
    }
  }

  .dialog-floor {
    @apply border-t border-gray-300 py-4 flex justify-center;
  }

  :deep(.el-dialog) {
    width: auto !important;
    .el-dialog__header {
      @apply p-0 bg-gray-100 m-0 text-center py-2 font-bold;
    }
    .el-dialog__body {
      @apply p-0;
    }
  }
}
</style>
